<template>
  <div class="box">
    <div class="box-header">
      <span class="title" :title="title" v-cloak>[{{title}}] 流程总览</span>
    </div>
    <div class="box-body">
      <div class="chart" id="chart-flowchart"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import bus from "@/utils/bus";
import Loading from "@/components/Loading";

export default {
  name: "",
  data() {
    return {
      title: null,
      chartobj: null,
      option: null,
      id: null
    };
  },
  created() {
    bus.$on("render-flow-analyze", msg => {
      this.id = msg.id;
      this.title = msg.name;
      this.renderChart(msg.id);
    });
  },
  methods: {
    renderChart(id) {
      this.showLoading = true;
      let params = {
        code:id
      };
      axios.get(this.URLHEAD_TA + "getLCJG", { params: params }).then(res => {
        let itemStyleGroups = {
          past: {
            borderColor: "#82dffe",
            borderWidth: 4,
            shadowBlur: 10,
            shadowColor: "#04f2a7",
            color: "#001c43"
          },
          current: {
            borderColor: "#2db11f",
            borderWidth: 4,
            shadowBlur: 10,
            shadowColor: "#2db11f33",
            color: "#14690b"
          },
          undone: {
            borderColor: "#ffffff55",
            borderWidth: 4,
            shadowBlur: 10,
            shadowColor: "#00000065",
            color: "#00000095"
          }
        };
        var json = res.data;
        var currentName = json.Data.dqjd;
        var currentIndex = 0;
        if(currentName === '已完成或强制完成'){
          //currentName = json.Data.lcjg[json.Data.lcjg.length - 1].piName
          currentIndex = json.Data.lcjg.length;
        }
        
        var status = null;
        var source = null,
          target = null;
        var proctable = json.Data.lcjg.map((o, i) => {
          var node = {
            source: null,
            target: null
          };
          if (o.piName === currentName) {
            status = "current";
            currentIndex = i;
          } else {
            status = "undone";
          }
          return {
            name: o.piName,
            status: status,
            x: 80 + i * 160,
            y: 120
          };
        });
        var linktable = [],
          linknode = {};
        for (var i = 0; i < json.Data.lcjg.length - 1; i++) {
          linknode.source = json.Data.lcjg[i].piName
          linknode.target = json.Data.lcjg[i+1].piName
          linktable.push(linknode);
          linknode = {};
        }
        let psttable = proctable.splice(0, currentIndex).map((o, i) => {
          return {
            name: o.name,
            status: "past",
            x: o.x,
            y: o.y
          };
        });
        proctable = psttable.concat(proctable);
        this.option = {
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: "quinticInOut",
          color:['#82dffe','#2db11f','#ffffff55'],
          legend: {
            show: true,
            x:'center',
            y:'top',
            data:['已跑通的节点','当前所处的节点','还未跑通的节点'],
            
            textStyle:{
              fontSize:12,color:'#fff'
            }
          },
          series: [
            {
              type: "graph",
              layout: "none",
              force: {
                repulsion: 1000,
                edgeLength: 50
              },
              symbolSize: 50,
              roam: true,
              label: {
                normal: {
                  show: true
                }
              },
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 13
                  },
                  formatter: "{c}"
                }
              },
              data: proctable.map((o, i) => {
                return {
                  name: o.name,
                  symbolSize: 100,
                  x: o.x,
                  y: o.y,
                  symbol: "diamond",
                  draggable: false,
                  category: 0,
                  itemStyle: { normal: itemStyleGroups[o.status] }
                };
              }),
              links: linktable.map(o => {
                return {
                  source: o.source,
                  target: o.target,
                  value: "",
                  lineStyle: {
                    normal: {
                      color: "rgba(255,255,255,0.5)",
                      width: 3
                    }
                  }
                };
              }),
              lineStyle: {
                normal: {
                  opacity: 0.9,
                  width: 5,
                  curveness: 0
                }
              },
              categories: [{ name: "已跑通的节点" }, { name: "当前所处的节点" }, { name: "还未跑通的节点" }]
            }
          ]
        };
        this.$Crender('chart-flowchart',this.option);
        this.showLoading=false;
      });
    }
  }
};
</script>

<style scoped>
.box .box-header .title{
  display: block;
  width:70%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>